<template>
	<view>
		<!-- 定位 -->
		<view class="search-view">
			<image src="../../../static/position.png"></image>
			<text class="search-text">亚太路浙江汽灵灵有限公司</text>
			<text>></text>
		</view>
		<!-- 搜索 -->
		<view class="search-cont">
			<view class="search" @click="seaRch">
				<image src="../../../static/search.png" class="search-img" mode="widthFix"></image>
				<input type="text" placeholder="麻辣烫" disabled>
			</view>
		</view>
		<!-- 自定义轮播 -->
		<view>
			<swiper class="swiper" :autoplay="false" :interval="2000" :duration="1000" @change="bannerfun">
				<block v-for="(item,index) in lable" :key="index">
					<swiper-item>
						<view class="swiper-item">
							<block v-for="(listdata,index) in item" :key="index">
								<view class="conteng-img">
									<image :src="listdata.img" mode="widthFix" class="uploadimg"></image>
									<text>{{listdata.title}}</text>
								</view>
							</block>
						</view>
					</swiper-item>

				</block>
			</swiper>
		</view>
		<!-- 指示点 -->
		<view class="instruct-view">
		 	<block v-for="(item,index) in lable.length" :key="index">
				<view class="instruct" :class="{active:index == num}"></view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num:0,
				// 轮播数组
				lable: [
					[{
							"img": "../../../static/foot (1).png",
							"title": "美食"
						},
						{
							"img": "../../../static/foot (2).png",
							"title": "超市遍历"
						},
						{
							"img": "../../../static/foot (3).png",
							"title": "蔬菜水果"
						},
						{
							"img": "../../../static/foot (4).png",
							"title": "美团外卖"
						},
						{
							"img": "../../../static/foot (5).png",
							"title": "闪电代购"
						},
						{
							"img": "../../../static/foot (6).png",
							"title": "宵夜"
						},
						{
							"img": "../../../static/foot (7).png",
							"title": "警惕精铁"
						},
						{
							"img": "../../../static/foot (8).png",
							"title": "饮料奶茶"
						},
						{
							"img": "../../../static/foot (9).png",
							"title": "浪漫桃花"
						},
						{
							"img": "../../../static/foot (10).png",
							"title": "其他"
						},
					],
					[{
							"img": "../../../static/foot (11).png",
							"title": "跑腿代购"
						},
						{
							"img": "../../../static/foot (12).png",
							"title": "汉堡披萨"
						},
						{
							"img": "../../../static/foot (13).png",
							"title": "日韩料理"
						},
						{
							"img": "../../../static/foot (14).png",
							"title": "麻辣烫"
						},
						{
							"img": "../../../static/foot (15).png",
							"title": "快事商城"
						},
						{
							"img": "../../../static/foot (16).png",
							"title": "甜蜜蛋糕"
						},
						{
							"img": "../../../static/foot (17).png",
							"title": "无辣不欢"
						},
						{
							"img": "../../../static/foot (18).png",
							"title": "饺子"
						},
						{
							"img": "../../../static/foot (19).png",
							"title": "小吃"
						},
						{
							"img": "../../../static/foot (20).png",
							"title": "煲仔饭"
						},
					]
				]
			}
		},
		methods:{
			// 滑块事件
			bannerfun(e){
				// console.log(e.target.current)
				this.num=e.target.current
			},
			//到搜索页面
			 seaRch(){
				 wx.navigateTo({
				 	url:'../search/search'
				 })
			 }
		}
	}
</script>

<style scoped lang="less">
	// 定位
	.search-view {
		font-size: 30upx;
		font-weight: bold;
		display: flex;
		align-items: center;
		height: 80upx;

		image {
			width: 35upx;
			height: 35upx;
		}

		.search-text {
			padding: 0 10upx;
		}
	}

	// 搜索
	.search-cont {
		display: flex;
		justify-content: space-between;
		height: 70upx;
		align-items: center;

		.search {
			height: 70upx;
			line-height: 70upx;
			width: 100%;
			display: flex;
			flex-direction: flex;
			background: #eff3f4;
			border-radius: 10rpx;

			input {
				height: 70upx;
				line-height: 70upx;
				width: 100%;
				font-size: 25upx;
				color: #666666;
			}

			.search-img {
				margin: auto 0 auto 20upx;
				width: 40upx;
				height: 40upx;
			}
		}
	}
	// 轮播图
	.swiper{
		height: 320upx !important;
		.swiper-item{
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
			height: 320upx;
			.conteng-img{
				width: calc((100% /5) - 12px) !important;
				margin: 6px;
				position: relative;
				text-align: center;
				text{
					padding-top: 20upx;
					font-size: 25upx;
				}
				.uploadimg{
					width: 70upx;
					height: 70upx;
					border-radius: 50upx;
					display: block;
					margin: 0 auto;
				}
			}
		}
	}
	// 指示点
	.instruct-view{
		display: flex;
		justify-content: center;
		padding-top: 10upx;
		.instruct{
			background-color: #e6e6e6;
			height: 10upx;
			width: 30upx;
			border-radius: 50upx;
			margin: 0 10upx;
		}
		.active{
			background: #fbae22 !important;
		}
	}
	
	
</style>
